<template>
  <div class="container" ref="container">

    <el-form label-width="100px" :validate-on-rule-change="false">
      <el-form-item label="转让" prop="joinUids" size="medium">
        <!--群成员-转让-->
        <PublicSelectGroupUser :option="optGroupTransfer" @select="selectUser($event, 'groupTransfer')"
          @delete="deleteUser($event, 'groupTransfer')" />
      </el-form-item>
      <el-form-item label="设置管理员" prop="joinUids" size="medium">
        <!--群成员-设置管理员-->
        <PublicSelectGroupUser :option="optGroupSetMaster" @select="selectUser($event, 'groupSetMaster')"
          @delete="deleteUser($event, 'groupSetMaster')" />
      </el-form-item>
    </el-form>
    <div class="sss"></div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      //转让群主选人配置
      optGroupTransfer: {
        width: '540px',
        placeholder: '请选择负责人，最多设置3人',
        isMultiple: false, //是否多选
        maxSelect: 3, //单选忽略
        //已选的成员列表
        selectedUserList: [],
        //团队成员列表
        groupUserList: []
      },
      //设置管理员选人配置
      optGroupSetMaster: {
        width: '540px',
        placeholder: '请选择负责人，最多设置3人',
        isMultiple: false, //是否多选
        maxSelect: 3, //单选忽略
        //已选的成员列表
        selectedUserList: [],
        //团队成员列表
        groupUserList: []
      }
    }
  },
  methods: {
    selectUser(ids, type) {
      switch (type) {
        case 'groupTransfer':
          console.log(ids)
          break
        case 'groupSetMaster':
          console.log(ids)
          break
      }
    },
    deleteUser(ids, type) {
      switch (type) {
        case 'groupTransfer':
          console.log(ids)
          break
        case 'groupSetMaster':
          console.log(ids)
          this.fn(ids)
          break
      }
    },
    fn(ids) {
      alert(ids)
      //发请求
      setTimeout(() => {
        this.optGroupSetMaster.selectedUserList = []
      }, 2000)
    }
  }
}
</script>

<style scoped>
.container {
  width: 1000px;
  height: 500px;
}

.sss {
  width: 400px;
  height: 200px;
  background-color: gray;
  position: relative;

  &::after {
    position: absolute;
    right: 35px;
    top: 10px;
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 10px 0 0 #fff, 20px 0 0 #fff;
  }
}
</style>
